<template>
  <!-- 快手商品属性组件 -->
  <div v-loading="loading" element-loading-text="加载中">
    <span class="font-red font-w mar-l-20">※ 请设置快手平台相关商品属性，发布/更新商品需要</span>
    
    <el-form label-position="right" class="pad-20" :model="propertyForm" :rules="rules" ref="propertyForm" label-suffix="：">

      <el-form-item label-width="130px" label="商品分类" prop="kuaiShouCategoryId">
        <el-cascader v-model="kuaiShouCategoryIds" 
          :options="kuaiShouCategoryData" 
          @change="doChangeCategoryId"
          filterable
          clearable 
          class="width-300">
        </el-cascader>
      </el-form-item>

      <el-form-item label-width="130px" label="运费模板" prop="templateId">
        <el-select v-model="propertyForm.templateId" clearable class="width-300">
          <el-option v-for="item in freightTemplateList" 
            :key="item.id" 
            :label="item.name" 
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      
      <el-form-item label-width="130px" label="承诺发货时间" prop="promiseDeliveryType">
        <el-select v-model="propertyForm.promiseDeliveryType" clearable class="width-300">
          <el-option v-for="item in promiseDeliveryTypeList" 
            :key="item.id" 
            :label="item.name" 
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      
    </el-form>

    <!-- 类目属性dialog -->
    <category-property :platformType="platformType"
      :shopId="shopId"
      :thirdCategoryId="propertyForm.kuaiShouCategoryId">
    </category-property>

    <div slot="footer" class="dialog-footer mar-b-10">  
      <el-button @click="doClose">取消</el-button>
      <el-button type="primary" @click="doSave">保存</el-button>
    </div>
  </div>
</template>

<script>
  import { getThirdCategoryTree } from '@/api/goods/thirdCategory'
  import { saveThirdGoods, getFreightTemplate, doGetThirdGoodsById } from '@/api/third/thirdGoods'

  import categoryProperty from '../category-property'

  export default {
    components: {
      categoryProperty
    },
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 店铺id
      shopId: {
        type: String
      },
      // 商品对象
      goodsObj: {
        type: Object
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      },
      shopId(val) {
        if (val) {
          this.initByShopId()
        }
      }
    },
    data() {
      return {
        // 快手平台类型
        platformType: 2,
        // 商品属性对象
        propertyForm: {
          thirdGoodsId: '',
          enterpriseId: '',
          memberId: '',
          goodsId: '',
          shopId: '',
          templateId: '',
          promiseDeliveryType: '',
          kuaiShouCategoryId: ''
        },
        // 分类model
        kuaiShouCategoryIds: [],
        // 表单规则
        rules: {
          kuaiShouCategoryId: [
            { required: true, message: '请选择商品类目', trigger: 'blur' }
          ],
          templateId: [
            { required: true, message: '请选择运费模板', trigger: 'blur' }
          ],
          promiseDeliveryType: [
            { required: true, message: '请选择承诺发货时间', trigger: 'blur' }
          ]
        },
        // 发货时间
        promiseDeliveryTypeList: [
          { id: 1, name: '24小时' },
          { id: 2, name: '48小时' },
          { id: 3, name: '72小时' }
        ],
        // 运费模板列表
        freightTemplateList: [],
        // 快手商品分类
        kuaiShouCategoryData: [],
        loading: false
      }
    },
    created() {
      this.initByShopId()
    },
    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const originData = this.$options.data()
        this.propertyForm = originData.propertyForm
        this.kuaiShouCategoryIds = originData.kuaiShouCategoryIds
        if (this.goodsObj.thirdGoodsId) {
          this.loading = true
          doGetThirdGoodsById({ thirdGoodsId: this.goodsObj.thirdGoodsId }).then(response => {
            if (response.isError) return
            this.loading = false
            Object.assign(this.propertyForm, response.data)
            this.propertyForm.templateId = this.propertyForm.templateId.toString()
            if (this.propertyForm.kuaiShouCategoryId) {
              this.kuaiShouCategoryIds = this.propertyForm.kuaiShouCategoryId
            }
          })
        } else {
          this.propertyForm.goodsId = this.goodsObj.goodsId
          this.propertyForm.enterpriseId = this.getEnterpriseId()
          this.propertyForm.memberId = this.getMemberId()
          this.propertyForm.platformType = this.platformType
          this.propertyForm.shopId = this.shopId
        }
      },
      // 根据店铺初始化
      initByShopId() {
        // 获取快手商品分类
        getThirdCategoryTree(this.platformType).then(response => {
          if (response.isError) return
          this.kuaiShouCategoryData = response.data
        })
        // 获取运费模板
        getFreightTemplate(this.platformType, this.shopId).then(response => {
          if (response.isError) return
          this.freightTemplateList = response.data
        })
      },
      // 分类选择事件
      doChangeCategoryId() {
        const kuaiShouCategoryIds = this.kuaiShouCategoryIds
        const kuaiShouCategoryId = Array.isArray(kuaiShouCategoryIds) ? kuaiShouCategoryIds[kuaiShouCategoryIds.length - 1] : kuaiShouCategoryIds
        this.propertyForm.kuaiShouCategoryId = kuaiShouCategoryId
      },
      // 关闭事件
      doClose() {
        this.$emit('callback', false)
      },
      // 保存事件
      doSave() {
        const kuaiShouCategoryIds = this.kuaiShouCategoryIds
        const kuaiShouCategoryId = Array.isArray(kuaiShouCategoryIds) ? kuaiShouCategoryIds[kuaiShouCategoryIds.length - 1] : kuaiShouCategoryIds
        this.propertyForm.kuaiShouCategoryId = kuaiShouCategoryId
        this.$refs['propertyForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            saveThirdGoods(this.propertyForm).then(response => {
              this.loading = false
              if (response.isError) return
              this.$message({ type: 'success', message: '保存成功' })
              this.$emit('callback', true)
            })
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>